<template>
  <!-- 嵌入iframe中，不使用任何布局 -->
  <template v-if="isInIframe">
    <ContainerLayout />
  </template>
  <template v-else>
    <LeftLayout v-if="currentLayout.layoutPlan === 'LEFT_NAVIGATION'" />
    <TopLayout v-if="currentLayout.layoutPlan === 'TOP_NAVIGATION'" />
    <DpaLayout v-if="currentLayout.layoutPlan === 'DPA_NAVIGATION'" />
    <DpaDetail v-if="currentLayout.layoutPlan === 'DPA_NAVIGATION_OTHER'" />
  </template>
</template>

<script setup lang="ts">
  import { computed, ref, watch, inject } from 'vue'
  import LeftLayout from '@/layouts/LeftLayout.vue'
  import TopLayout from '@/layouts/TopLayout.vue'
  import ContainerLayout from '@/layouts/ContainerLayout.vue'
  import DpaLayout from '@/layouts/components/AlLayoutDpa/index.vue'
  import DpaDetail from '@/layouts/components/AlLayoutDpaDetail/index.vue'
  import LayoutConfig from '@/layouts/layoutConfig.json'
  import useAlLayoutStyleEffect from './hooks/alLayoutStyleEffet'

  import { useRoute, useRouter } from 'vue-router'
  import advancedMenuConfiguration from '@/layouts/advancedMenuConfiguration.json'
  import { useLayoutStore } from '@/store/modules/layout'
  import { find, cloneDeep } from 'lodash-es'
  import { LAYOUT_PLAN_KEY } from '@/constant'
  const isInIframe = ref(window.parent !== window.self)
  const getLayoutMap = () => {
    if (!advancedMenuConfiguration.enable) {
      return null
    }
    const _layoutMap = []
    const recursiveLayoutMenu = (menuList, layoutPlanId, layoutPlan) => {
      menuList.forEach(item => {
        let menuUrl = item.menuUrl
        // 处理url中没有:的问题
        if (menuUrl.match(/https:\/\/.*$/)) {
          menuUrl = menuUrl.replace(/https:\/\//g, 'https//')
        } else if (menuUrl.match(/http:\/\/.*$/)) {
          menuUrl = menuUrl.replace(/http:\/\//g, 'http//')
        }

        menuUrl = menuUrl ? menuUrl + LAYOUT_PLAN_KEY + layoutPlanId : menuUrl

        _layoutMap.push({
          menuId: item.menuId,
          url: menuUrl,
          layoutPlanId,
          layoutPlan
        })
        if (item.children && item.children.length > 0) {
          recursiveLayoutMenu(item.children, layoutPlanId, layoutPlan)
        }
      })
    }
    advancedMenuConfiguration.layoutConfiguration.forEach(layoutItem => {
      const { id, layoutPlan, menuConfigurationList, dpaMenuConfiguration } = layoutItem
      if (layoutItem.layoutPlan !== 'DPA_NAVIGATION') {
        recursiveLayoutMenu(menuConfigurationList, id, layoutPlan)
      } else {
        recursiveLayoutMenu(dpaMenuConfiguration.leftMenuList, id, layoutPlan)
        recursiveLayoutMenu(dpaMenuConfiguration.rightMenuList, id, 'DPA_NAVIGATION_OTHER')
        recursiveLayoutMenu(dpaMenuConfiguration.bottomMenuList, id, 'DPA_NAVIGATION_OTHER')
      }
    })

    return _layoutMap
  }

  const layoutStore = useLayoutStore()
  let layoutMap = layoutStore.getLayoutMap

  if (!layoutMap) {
    layoutMap = getLayoutMap()
    layoutStore.updateLayoutMap(layoutMap)
  }

  const route = useRoute()
  const router = useRouter();
  const currentLayout = ref({
    layoutPlan: 'LEFT_NAVIGATION'
  })
  // 针对系统管理，做特殊处理
  watch(()=> router,
    (newVal, oldVal) =>{
      if (oldVal) {
        const {current, back} = newVal.options.history.state;
          if (back && back.indexOf('allin-privilege-management-web')===-1 && current.indexOf('allin-privilege-management-web')!==-1) {
            window.location.reload()
          }
      }
    }, {deep: true, immediate: true})

  watch(
    () => route,
    newVal => {
      // 根据当前路由获取布局id
      const {
        meta: { layoutPlanId: metaLayoutPlanId },
        fullPath,
        query
      } = newVal || { meta: {}, fullPath: '' }
      // 如果路由中携带了layoutPlanId参数，以路由中的参数为准
      const layoutPlanId = query && query.layoutPlanId ? query.layoutPlanId : metaLayoutPlanId
      // 如果参数中包括了dpaDetail，直接使用白屏layout
      if (query.dpaDetail === 'dpaDetail') {
        currentLayout.value.layoutPlan = 'DPA_NAVIGATION_OTHER'
        return
      }
      // 如果有布局，获取布局方式
      if (layoutPlanId) {
        if (layoutPlanId === 'DPA_NAVIGATION_OTHER') {
          currentLayout.value.layoutPlan = 'DPA_NAVIGATION_OTHER'
          return
        }
        const { layoutConfiguration } = cloneDeep(advancedMenuConfiguration)
        const _currentLayout = find(layoutConfiguration, { id: layoutPlanId })
        if (_currentLayout) {
          currentLayout.value = _currentLayout
        } else {
          currentLayout.value = advancedMenuConfiguration.layoutConfiguration[0]
        }
      } else if (advancedMenuConfiguration.enable) {
        const _currentLayout = find(layoutMap, { url: fullPath })
        if (_currentLayout) {
          currentLayout.value = _currentLayout
        } else {
          currentLayout.value = advancedMenuConfiguration.layoutConfiguration[0]
        }
      } else {
        currentLayout.value = LayoutConfig
      }
    },
    {
      immediate: true,
      deep: true
    }
  )

  const menuTheme = computed(() => {
    return LayoutConfig.themeSettings
  })
  // 获取全局参数
  const configProvider = inject('configProvider')
  const { handleAddCousomsStyle, handleRemoveCousomsStyle } = useAlLayoutStyleEffect(handleGetStyle)
  // ---------------------------------------------------- 监听
  watch(
    () => [menuTheme.value, route],
    () => {
      if (menuTheme.value === 'CUSTOM') {
        return handleAddCousomsStyle()
      }
      handleRemoveCousomsStyle()
    },
    {
      deep: true,
      immediate: true
    }
  )
  // ---------------------------------------------------- 方法
  //  获取自定样式
  function handleGetStyle() {
    if (!LayoutConfig.topMenuArea || LayoutConfig.layoutPlan === 'DPA_NAVIGATION') {
      return
    }
    const layouts = {
      LEFT_NAVIGATION: handleSetVerticalStyles,
      TOP_NAVIGATION: handleSetHorizontalStyles
    }
    return layouts[LayoutConfig.layoutPlan](configProvider && configProvider.prefixCls)
  }
  // 左侧导航自定义样式
  function handleSetVerticalStyles(prefixCls) {
    const { leftMenuArea: left, topMenuArea: top } = LayoutConfig
    const { textStyle } = left
    return `
            .al-layout-theme-custom .${prefixCls}-layout-sider,
            .al-layout-theme-custom .${prefixCls}-layout-sider .${prefixCls}-layout-sider-trigger,
            .al-layout-theme-custom .${prefixCls}-menu,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-selected,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-open,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-sub{
                background: ${left.backgroundColor};
                color: ${textStyle.menuStyle.firstLevelMenu.textColor};
            }
            /**一级菜单**/
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first > .${prefixCls}-menu-submenu-title,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item.al_menu_item_first {
              color: ${textStyle.menuStyle.firstLevelMenu.textColor};
              font-size: ${textStyle.menuStyle.firstLevelMenu.fontSize}px;
              font-weight: ${textStyle.menuStyle.firstLevelMenu.bold ? 'bold' : 'normal'};
              font-style: ${textStyle.menuStyle.firstLevelMenu.italic ? 'italic' : 'normal'};
              text-decoration: ${textStyle.menuStyle.firstLevelMenu.underline ? 'underline' : 'none'};
            }
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before {
              background: ${textStyle.menuStyle.firstLevelMenu.textColor}
            }
            .al-layout-theme-custom .${prefixCls}-menu .al_menu_item_first.${prefixCls}-menu-item:hover,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item.al_menu_item_first.${prefixCls}-menu-item-active,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-active > .${prefixCls}-menu-submenu-title,
            .al-layout-theme-custom .${prefixCls}-menu .al_menu_item_first > .${prefixCls}-menu-submenu-title:hover,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item.al_menu_item_first.${prefixCls}-menu-item-selected,
            .al-layout-theme-custom .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .al_menu_item_first.${prefixCls}-menu-item-selected.${prefixCls}-menu-item,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-selected > .${prefixCls}-menu-submenu-title,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-item-icon{
              color: ${textStyle.menuStyle.firstLevelMenu.selectedColor};
            }
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-selected > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-selected > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-active > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-active > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before {
              background: ${textStyle.menuStyle.firstLevelMenu.selectedColor}
            }
            /**二级菜单**/
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item.al_menu_item_second,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-sub .al_menu_item_second > .${prefixCls}-menu-submenu-title{
              color: ${textStyle.menuStyle.secondaryMenu.textColor};
              font-size: ${textStyle.menuStyle.secondaryMenu.fontSize}px;
              font-weight: ${textStyle.menuStyle.secondaryMenu.bold ? 'bold' : 'normal'};
              font-style: ${textStyle.menuStyle.secondaryMenu.italic ? 'italic' : 'normal'};
              text-decoration: ${textStyle.menuStyle.secondaryMenu.underline ? 'underline' : 'none'};
            }
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_second > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_second > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before {
              background: ${textStyle.menuStyle.secondaryMenu.textColor}
            }
            .al-layout-theme-custom .${prefixCls}-menu .al_menu_item_second.${prefixCls}-menu-item:hover,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item.al_menu_item_second.${prefixCls}-menu-item-active,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_second.${prefixCls}-menu-submenu-active > .${prefixCls}-menu-submenu-title,
            .al-layout-theme-custom .${prefixCls}-menu .al_menu_item_second > .${prefixCls}-menu-submenu-title:hover,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item.al_menu_item_second.${prefixCls}-menu-item-selected,
            .al-layout-theme-custom .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .al_menu_item_second.${prefixCls}-menu-item-selected.${prefixCls}-menu-item,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_second.${prefixCls}-menu-submenu-selected > .${prefixCls}-menu-submenu-title,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_second.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_second.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-item-icon{
              color: ${textStyle.menuStyle.secondaryMenu.selectedColor};
            }
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_second.${prefixCls}-menu-submenu-selected > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_second.${prefixCls}-menu-submenu-selected > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_second.${prefixCls}-menu-submenu-active > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_second.${prefixCls}-menu-submenu-active > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_second.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_second.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before {
              background: ${textStyle.menuStyle.secondaryMenu.selectedColor}
            }
            /**三级菜单**/
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item.al_menu_item_three,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-sub .al_menu_item_three > .${prefixCls}-menu-submenu-title {
              color: ${textStyle.menuStyle.threeLevelMenu.textColor};
              font-size: ${textStyle.menuStyle.threeLevelMenu.fontSize}px;
              font-weight: ${textStyle.menuStyle.threeLevelMenu.bold ? 'bold' : 'normal'};
              font-style: ${textStyle.menuStyle.threeLevelMenu.italic ? 'italic' : 'normal'};
              text-decoration: ${textStyle.menuStyle.threeLevelMenu.underline ? 'underline' : 'none'};
            }
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_three > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_three > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before {
              background: ${textStyle.menuStyle.threeLevelMenu.textColor}
            }
            .al-layout-theme-custom .${prefixCls}-menu .al_menu_item_three.${prefixCls}-menu-item:hover,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item.al_menu_item_three.${prefixCls}-menu-item-active,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_three.${prefixCls}-menu-submenu-active > .${prefixCls}-menu-submenu-title,
            .al-layout-theme-custom .${prefixCls}-menu .al_menu_item_three > .${prefixCls}-menu-submenu-title:hover,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item.al_menu_item_three.${prefixCls}-menu-item-selected,
            .al-layout-theme-custom .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .al_menu_item_three.${prefixCls}-menu-item-selected.${prefixCls}-menu-item,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_three.${prefixCls}-menu-submenu-selected > .${prefixCls}-menu-submenu-title,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_three.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_three.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-item-icon{
              color: ${textStyle.menuStyle.threeLevelMenu.selectedColor};
            }
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_three.${prefixCls}-menu-submenu-selected > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_three.${prefixCls}-menu-submenu-selected > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_three.${prefixCls}-menu-submenu-active > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_three.${prefixCls}-menu-submenu-active > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_three.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_three.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before {
              background: ${textStyle.menuStyle.threeLevelMenu.selectedColor}
            }
            /**四级菜单**/
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item.al_menu_item_four,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-sub .al_menu_item_four > .${prefixCls}-menu-submenu-title {
              color: ${textStyle.menuStyle.fourLevelMenu.textColor};
              font-size: ${textStyle.menuStyle.fourLevelMenu.fontSize}px;
              font-weight: ${textStyle.menuStyle.fourLevelMenu.bold ? 'bold' : 'normal'};
              font-style: ${textStyle.menuStyle.fourLevelMenu.italic ? 'italic' : 'normal'};
              text-decoration: ${textStyle.menuStyle.fourLevelMenu.underline ? 'underline' : 'none'};
            }
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_four > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_four > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before {
              background: ${textStyle.menuStyle.fourLevelMenu.textColor}
            }
            .al-layout-theme-custom .${prefixCls}-menu .al_menu_item_four.${prefixCls}-menu-item:hover,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item.al_menu_item_four.${prefixCls}-menu-item-active,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_four.${prefixCls}-menu-submenu-active > .${prefixCls}-menu-submenu-title,
            .al-layout-theme-custom .${prefixCls}-menu .al_menu_item_four > .${prefixCls}-menu-submenu-title:hover,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item.al_menu_item_four.${prefixCls}-menu-item-selected,
            .al-layout-theme-custom .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .al_menu_item_four.${prefixCls}-menu-item-selected.${prefixCls}-menu-item,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_four.${prefixCls}-menu-submenu-selected > .${prefixCls}-menu-submenu-title,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_four.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_four.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-item-icon{
              color: ${textStyle.menuStyle.fourLevelMenu.selectedColor};
            }
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_four.${prefixCls}-menu-submenu-selected > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_four.${prefixCls}-menu-submenu-selected > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_four.${prefixCls}-menu-submenu-active > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_four.${prefixCls}-menu-submenu-active > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_four.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_four.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before {
              background: ${textStyle.menuStyle.fourLevelMenu.selectedColor}
            }

            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item:hover,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item-active,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-active,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-selected,
            .al-layout-theme-custom .${prefixCls}-menu.${prefixCls}-menu-submenu-title:hover,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-open,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item-selected,
            .al-layout-theme-custom .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-item-selected {
              background-color: ${left.backgroundColor}
            }
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-inline.${prefixCls}-menu-sub {
                box-shadow: none;
                background-color: ${left.backgroundColor};
            }
            .al-layout-theme-custom .${prefixCls}-layout-header{
                background: ${top.backgroundColor} !important;
                color: ${top.textColor} !important;
            }
            /**应用端顶部header-用户那块下拉样式**/
            .al-layout-custom-new .${prefixCls}-dropdown-placement-bottomRight .${prefixCls}-dropdown-menu-item-active,
            .al-layout-custom-new .${prefixCls}-dropdown-placement-bottomRight .${prefixCls}-dropdown-menu-item:hover {
                color: ${top.selectedColor};
                background-color: ${top.backgroundColor}
            }
            .${prefixCls}-menu-vertical.${prefixCls}-menu-sub,
            .${prefixCls}-menu-vertical-left.${prefixCls}-menu-sub,
            .${prefixCls}-menu-vertical-right.${prefixCls}-menu-sub{
                color: ${textStyle.menuStyle.firstLevelMenu.selectedColor};
                background-color: ${left.backgroundColor}
            }
            .${prefixCls}-menu-inline-collapsed-tooltip .${prefixCls}-tooltip-inner{
                color: ${textStyle.menuStyle.firstLevelMenu.selectedColor};
                background-color: ${left.backgroundColor}
            }
        `
  }
  // 顶部导航自定义样式
  function handleSetHorizontalStyles(prefixCls) {
    const { topMenuArea: top } = LayoutConfig
    const { textStyle } = top
    return `
          .al-layout-theme-custom .${prefixCls}-layout-sider,
          .al-layout-theme-custom .logo-wrapper,
          .al-layout-theme-custom .${prefixCls}-menu,
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item,
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-sub{
            background: ${top.backgroundColor};
            color: ${textStyle.menuStyle.firstLevelMenu.textColor};
          }
          /**一级菜单**/
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first > .${prefixCls}-menu-submenu-title,
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item.al_menu_item_first {
            color: ${textStyle.menuStyle.firstLevelMenu.textColor};
            font-size: ${textStyle.menuStyle.firstLevelMenu.fontSize}px;
            font-weight: ${textStyle.menuStyle.firstLevelMenu.bold ? 'bold' : 'normal'};
            font-style: ${textStyle.menuStyle.firstLevelMenu.italic ? 'italic' : 'normal'};
            text-decoration: ${textStyle.menuStyle.firstLevelMenu.underline ? 'underline' : 'none'};
          }
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before {
            background: ${textStyle.menuStyle.firstLevelMenu.textColor}
          }
          .al-layout-theme-custom .${prefixCls}-menu .al_menu_item_first.${prefixCls}-menu-item:hover,
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item.al_menu_item_first.${prefixCls}-menu-item-active,
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-active > .${prefixCls}-menu-submenu-title,
          .al-layout-theme-custom .${prefixCls}-menu .al_menu_item_first > .${prefixCls}-menu-submenu-title:hover,
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item.al_menu_item_first.${prefixCls}-menu-item-selected,
          .al-layout-theme-custom .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .al_menu_item_first.${prefixCls}-menu-item-selected.${prefixCls}-menu-item,
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-selected > .${prefixCls}-menu-submenu-title,
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title,
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-item-icon{
            color: ${textStyle.menuStyle.firstLevelMenu.selectedColor};
          }
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-active > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-active > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before,
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before {
            background: ${textStyle.menuStyle.firstLevelMenu.selectedColor}
          }

          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-item.al_menu_item_first,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_first > .${prefixCls}-menu-submenu-title{
            color: ${textStyle.menuStyle.firstLevelMenu.textColor};
            font-size: ${textStyle.menuStyle.firstLevelMenu.fontSize}px;
            font-weight: ${textStyle.menuStyle.firstLevelMenu.bold ? 'bold' : 'normal'};
            font-style: ${textStyle.menuStyle.firstLevelMenu.italic ? 'italic' : 'normal'};
            text-decoration: ${textStyle.menuStyle.firstLevelMenu.underline ? 'underline' : 'none'};
          }
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_first > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_first > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before {
            background: ${textStyle.menuStyle.firstLevelMenu.textColor}
          }
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-item.al_menu_item_first.${prefixCls}-menu-item-selected,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-item.al_menu_item_first.${prefixCls}-menu-submenu-selected,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}icon + span,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}icon{
            color: ${textStyle.menuStyle.firstLevelMenu.selectedColor};
          }
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_first.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before {
            background: ${textStyle.menuStyle.firstLevelMenu.selectedColor}
          }
          /**二级菜单**/
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-item.al_menu_item_second,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_second > .${prefixCls}-menu-submenu-title{
            color: ${textStyle.menuStyle.secondaryMenu.textColor};
            font-size: ${textStyle.menuStyle.secondaryMenu.fontSize}px;
            font-weight: ${textStyle.menuStyle.secondaryMenu.bold ? 'bold' : 'normal'};
            font-style: ${textStyle.menuStyle.secondaryMenu.italic ? 'italic' : 'normal'};
            text-decoration: ${textStyle.menuStyle.secondaryMenu.underline ? 'underline' : 'none'};
          }
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_second > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_second > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before {
            background: ${textStyle.menuStyle.secondaryMenu.textColor}
          }
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-item.al_menu_item_second.${prefixCls}-menu-item-selected,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-item.al_menu_item_second.${prefixCls}-menu-submenu-selected,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_second.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_second.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}icon + span,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_second.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}icon{
            color: ${textStyle.menuStyle.secondaryMenu.selectedColor};
          }
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_second.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_second.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before {
            background: ${textStyle.menuStyle.secondaryMenu.selectedColor}
          }
          /**三级菜单**/
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-item.al_menu_item_three,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .al_menu_item_three > .${prefixCls}-menu-submenu-title {
            color: ${textStyle.menuStyle.threeLevelMenu.textColor};
            font-size: ${textStyle.menuStyle.threeLevelMenu.fontSize}px;
            font-weight: ${textStyle.menuStyle.threeLevelMenu.bold ? 'bold' : 'normal'};
            font-style: ${textStyle.menuStyle.threeLevelMenu.italic ? 'italic' : 'normal'};
            text-decoration: ${textStyle.menuStyle.threeLevelMenu.underline ? 'underline' : 'none'};
          }
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_three > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_three > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before {
            background: ${textStyle.menuStyle.threeLevelMenu.textColor}
          }
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-item.al_menu_item_three.${prefixCls}-menu-item-selected,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-item.al_menu_item_three.${prefixCls}-menu-submenu-selected,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_three.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_three.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}icon + span,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_three.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}icon{
            color: ${textStyle.menuStyle.threeLevelMenu.selectedColor};
          }
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_three.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_three.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before {
            background: ${textStyle.menuStyle.threeLevelMenu.selectedColor}
          }
          /**四级菜单**/
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-item.al_menu_item_four,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-sub .al_menu_item_four > .${prefixCls}-menu-submenu-title {
            color: ${textStyle.menuStyle.fourLevelMenu.textColor};
            font-size: ${textStyle.menuStyle.fourLevelMenu.fontSize}px;
            font-weight: ${textStyle.menuStyle.fourLevelMenu.bold ? 'bold' : 'normal'};
            font-style: ${textStyle.menuStyle.fourLevelMenu.italic ? 'italic' : 'normal'};
            text-decoration: ${textStyle.menuStyle.fourLevelMenu.underline ? 'underline' : 'none'};
          }
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_four > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_four > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before {
            background: ${textStyle.menuStyle.fourLevelMenu.textColor}
          }
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-item.al_menu_item_four.${prefixCls}-menu-item-selected,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_four.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_four.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}icon + span,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_four.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}icon{
            color: ${textStyle.menuStyle.fourLevelMenu.selectedColor};
          }
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_four.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
          .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-vertical.${prefixCls}-menu-sub .${prefixCls}-menu-submenu.al_menu_item_four.${prefixCls}-menu-submenu-open > .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before {
            background: ${textStyle.menuStyle.fourLevelMenu.selectedColor}
          }


          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item:hover,
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item-active,
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-active,
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-selected,
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-title:hover,
          .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-open,
          .al-layout-theme-custom .${prefixCls}-menu.${prefixCls}-menu .${prefixCls}-menu-item-selected,
          .al-layout-theme-custom .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-item-selected {
            background-color: ${top.backgroundColor}
          }
          .al-layout-theme-custom .${prefixCls}-layout-header{
            background: ${top.backgroundColor} !important;
            color: ${textStyle.menuStyle.firstLevelMenu.textColor} !important;
          }
          .${prefixCls}-menu-vertical.${prefixCls}-menu-sub,
          .${prefixCls}-menu-vertical-left.${prefixCls}-menu-sub,
          .${prefixCls}-menu-vertical-right.${prefixCls}-menu-sub{
            color: ${textStyle.menuStyle.firstLevelMenu.selectedColor};
            background-color: ${top.backgroundColor}
          }
          /**应用端顶部header-用户那块下拉样式**/
          .al-layout-custom-new .${prefixCls}-dropdown-placement-bottomRight .${prefixCls}-dropdown-menu-item-active,
          .al-layout-custom-new .${prefixCls}-dropdown-placement-bottomRight .${prefixCls}-dropdown-menu-item:hover {
            color: ${textStyle.menuStyle.firstLevelMenu.selectedColor};
            background-color: ${top.backgroundColor}
          }
        `
  }
</script>
